<template>
    <el-button @click="clearFilter">重置所有筛选</el-button>
    <el-table ref="tableRef" row-key="date" :data="tableData" style="width: 100%">
        <el-table-column type="expand" prop="desc,img_path">
            <template #default="props">
                <div m="4">
                    <p m="t-0 b-2">投诉描述: {{ props.row.desc }}</p>
                    <img :src="props.row.img_path" style="height: 150px; width: 150px;" :style="props.row.imgVisible">
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="date" label="Date" sortable width="180" column-key="date" />
        <el-table-column prop="username" label="用户名" width="180" />
        <el-table-column prop="complaintType" label="投诉类型" column-key="complaintType" :formatter="formatter" :filters="[
            { text: '客服态度', value: '客服态度' },
            { text: '平台信息有误', value: '平台信息有误' },
            { text: '景区问题反馈', value: '景区问题反馈' },
        ]" :filter-method="filterType" filter-placement="bottom-end">
        </el-table-column>
        <el-table-column prop="result" label="处理结果" width="180" />
        <el-table-column prop="tag" label="处理状态" width="100">
            <template #default="scope">
                <el-tag type='success' disable-transitions>{{ scope.row.tag }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column align="right" prop="isSolved">
            <template #default="scope">
                <el-button size="small" type="success" :disabled="tableData[scope.$index].isSolved"
                    @click="handleEdit(scope.$index, scope.row)">结案</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
    
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import type { TableColumnCtx, TableInstance } from 'element-plus'
import axios from 'axios';
import { getRequest,deleteRequest } from '../../../api/axiosAPI'

interface User {
    isSolved: boolean
    complaintsId: string
    date: string
    username: string
    complaintType: string
    tag: string
    desc: string
    result: string
    img_path: string
    imgVisible: string
}
//初始化用户个人处理记录
onMounted(() => {
    getAllStared();
})

//撤销投诉,请求delete
const deleteRow = (index: number) => {
    if (window.confirm('请确认撤销操作')) {
        console.log(index)
        console.log(tableData.value[index])
        tableData.value.splice(index, 1)
        axios.delete('http://localhost:9090/complaints', {

        })
    }
    else {
        window.alert('操作已取消')
    }
}
const tableRef = ref<TableInstance>()

// TODO: improvement typing when refactor table
//清除筛选列表
const clearFilter = () => {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    tableRef.value!.clearFilter()
}

//格式化输出
const formatter = (row: User, column: TableColumnCtx<User>) => {
    return row.complaintType
}

//投诉类型筛选函数
const filterType = (value: string, row: User) => {
    return row.complaintType === value
}

//点击回复处理按钮
const handleEdit = (index: string, row: User) => {
    let tempId = row.complaintsId;
    deleteRequest(`http://localhost:8022/api/complaints/delete?complaintId=${tempId}`,null)
    .then((response)=>{
        if(response.status === 200 && response.data.msg === '成功'){
            getAllStared();
        }else{
            alert('结案失败，请稍后再试!');
        }
    })
}

//表格数据
const tableData = ref([
    {
        isSolved: false,
        complaintsId: '1',
        date: '2016-05-03',
        username: 'Tom',
        complaintType: '客服态度',
        tag: '已评价',
        desc: '哒哒哒哒哒哒哒哒哒',
        result: '处理结果',
        img_path: '',
        imgVisible: '',
    },
    {
        isSolved: false,
        complaintsId: '2',
        date: '2016-05-02',
        username: 'Tom',
        complaintType: '平台信息有误',
        tag: '已评价',
        desc: '哒哒哒哒哒哒哒哒哒',
        result: '处理结果',
        img_path: '',
        imgVisible: '',
    },
    {
        isSolved: false,
        complaintsId: '3',
        date: '2016-05-04',
        username: 'Tom',
        complaintType: '平台信息有误',
        tag: '已评价',
        desc: '哒哒哒哒哒哒哒哒哒',
        result: '处理结果',
        img_path: '',
        imgVisible: '',
    },
    {
        isSolved: false,
        complaintsId: '4',
        date: '2016-05-01',
        username: 'Tom',
        complaintType: '景区问题反馈',
        tag: '已评价',
        desc: '哒哒哒哒哒哒哒哒哒',
        result: '处理结果',
        img_path: '',
        imgVisible: '',
    },
])

const getAllStared = () => {
    tableData.value = [];
    getRequest('http://localhost:8022/api/complaints/getAllStared', null)
        .then((response) => {
            if (response.status === 200) {
                return response.data;
            } else {
                console.log('NetWork Error!');
            }
        }).then((data) => {
            let tempArr = data.data;
            console.log(tempArr);
            for (let i = 0; i < tempArr.length; i++) {
                let tempImgVisible = 'display:block'
                if(tempArr[i].imgPath === ''){
                    console.log('Into if');
                    tempImgVisible = 'display:none'
                }
                tableData.value[i] = {
                    isSolved: false,
                    complaintsId: tempArr[i].complaintId,
                    date: tempArr[i].date,
                    username: tempArr[i].username,
                    complaintType: tempArr[i].type,
                    tag: '已评价',
                    desc: tempArr[i].description,
                    result: tempArr[i].result,
                    img_path: tempArr[i].imgPath,
                    imgVisible: tempImgVisible
                }
            }
        });
}
</script>
